<template>
  <div class="tab-title-page">
    <div class="nav_tabs">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="基础信息"
          name="base"
        ></el-tab-pane>
        <el-tab-pane
          label="主体信息"
          name="main"
        ></el-tab-pane>
        <el-tab-pane
          label="店铺二维码"
          name="code"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <el-divider class="middle_divider"></el-divider>
    <div class="child_page">
      <base-info
        v-if="activeName==='base'"
        ref="baseInfo"
      ></base-info>
      <main-info
        v-if="activeName==='main'"
        ref="mainInfo"
      ></main-info>
      <code-info
        v-if="activeName==='code'"
        ref="codeInfo"
      ></code-info>
    </div>
  </div>
</template>

<script>
import baseInfo from "./child/base";
import mainInfo from "./child/main";
import codeInfo from "./child/code";
export default {
  components: { baseInfo, mainInfo, codeInfo },
  data() {
    return {
      activeName: 'base'
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>
<style lang="scss" scoped>
.child_page {
  padding: 20px 30px;
}
/deep/.label_title {
  padding: 10px 24px;
  background: #f5f5f5;
  margin-top: 20px;
  margin-bottom: 10px;
  p {
    padding-left: 12px;
    border-left: 3px solid $mainBlue;
    font-size: 16px;
  }
}
/deep/.list_item {
  width: 50%;
  display: flex;
  margin-bottom: 7px;
  label {
    width: 150px;
    text-align: right;
    line-height: 35px;
  }
  & > div,
  & > p {
    flex: 1;
    line-height: 35px;
  }
}
</style>